
<template>
  <div class="home">
    <!-- 首页轮播图 -->
    <swipe></swipe>
    <!-- 导航 -->
    <Nav class="nav"></Nav>
    <!-- 课程详情 -->
    <course-details
      class="list"
      v-for="(item, index) in recommend"
      :key="index"
      :item="item"
    ></course-details>
  </div>
</template>

<script>
// 轮播图
import swipe from "@/components/index/swipe.vue";
// 导航栏
import Nav from "@/components/index/nav.vue";
// 课程详情
import courseDetails from "@/components/index/courseDetails.vue";
import { getBanner } from "@/request/home";
import { getrecommend } from "@/request/home";
export default {
  name: "",
  components: { swipe, Nav, courseDetails },
  data() {
    return {
      recommend: [],
    };
  },
  created() {
    this.getrecommend();
  },
  mounted() {},
  methods: {
    //接口中没有数据
    // async getBanner() {
    //   let res = await getBanner();
    //   console.log(res);
    // 首页详情
    async getrecommend() {
      let res = await getrecommend();
      console.log(res);
      this.recommend = res.data.data;
      console.log(this.recommend);
    },
  },
};
</script>
<style scoped lang='scss'>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  .nav {
    position: absolute;
    top: 100px;
  }
  .list {
    margin-top: 100px;
  }
}
</style>
